<template>
  <div>
    <title-bar
      :titleText="$route.meta.title"
      :needBack="false"
    >
      <!-- 返回按钮 -->
      <slot name="left">
        <i
          class="icon iconfont icon-back back-btn"
          @click="back()"
        ></i>
      </slot>
      <slot>
        <!-- 标题 -->
        <span class="title-text">绑定手机号</span>
      </slot>
    </title-bar>
    <!-- 顶部错误信息提示 -->
    <div class="fontsize24 error-msg-warpper">为了您的账户安全，请绑定手机号</div>
    <!-- 头像昵称 -->
    <div class="flex-v flex-vc">
      <img
        class="head-portrait-icon"
        :src="headPortrait"
      />
      <div class="fontsize28 nick-name">{{nickName}}</div>
    </div>
    <!-- 输入区域 -->
    <div class="input-warpper">
      <!-- 手机号输入组件 -->
      <username-input
        ref="myUsername"
        :username="username"
      ></username-input>
      <!-- 验证码输入组件 -->
      <sms-code-input
        ref="mySmsCode"
        :smsCode="smsCode"
        :smscodeType="smscodeType"
      ></sms-code-input>
      <!-- 用户协议单选框 -->
      <agreement-radio ref="myAgreementRadio"></agreement-radio>
      <!-- 确定按钮 -->
      <button
        class="baseBgColorNoActive fontsize28 confirm-btn"
        @click="bindPhoneLogin()"
      >确定</button>
    </div>
    <img
      v-if="isShowBottomImg"
      class="bottom-img"
      src="./../assets/login-bottom.png"
    />
    <!-- <bind-mask
      ref="myBindMask"
      @bindWechat="bindWechat()"
    ></bind-mask> -->
  </div>
</template>

<script>
import UsernameInput from '../components/UsernameInput'
import SmsCodeInput from '../components/SmsCodeInput'
import AgreementRadio from '../components/AgreementRadio'
// import BindMask from '../components/BindMask'
// import BindMaskJS from '../components/BindMaskJS'
import { thirdpartyBindPhoneLogin, getUnreadMessageCount } from '../api/api'
import { setUserInfoJumpLogin } from '../utils/loginCommon'
import { validatePromiseAll } from '../utils/validateForm'
import { TitleBar } from 'vue-xb-ui-depot'

export default {
  components: {
    usernameInput: UsernameInput,
    smsCodeInput: SmsCodeInput,
    agreementRadio: AgreementRadio,
    // bindMask: BindMask,
    TitleBar
  },
  data() {
    return {
      headPortrait: require('../assets/login-head.png'), // 头像
      nickName: '', // 昵称
      username: '', // 手机号
      smsCode: '', // 短信验证码
      smscodeType: 4, // 发送验证码类型：1:通用验证码，2:注册验证码，3:忘记密码验证码，4:第三方登录验证码绑定手机号（微信）
      isSelectAgreement: false, // 是否选中用户协议
      isShowBottomImg: window.isShowBottomImg// 是否展示底部图片
    }
  },
  mounted() {
    this.nickName = this.$route.query.nickName || ''
    this.headPortrait = this.$route.query.headPortrait ? this.$route.query.headPortrait : require('../assets/login-head.png')
    // BindMaskJS.show()
  },
  updated() {
    if (this.$refs.mySmsCode.countDownTimer) {
      clearInterval(this.$refs.mySmsCode.countDownTimer)
    }
  },
  methods: {
    back() { // 返回
      // 离开清除计时器
      if (this.$refs.mySmsCode.countDownTimer) {
        clearInterval(this.$refs.mySmsCode.countDownTimer)
      }
      this.$router.back(-1)
    },
    bindPhoneLogin() { // 绑定手机号登录
      let username = this.$refs.myUsername.username
      let smsCode = this.$refs.mySmsCode.smsCode
      let isSelectAgreement = this.$refs.myAgreementRadio.isSelectAgreement
      validatePromiseAll({
        checkArray: [{
          type: 'username',
          value: username
        }, {
          type: 'smscode',
          value: smsCode
        }, {
          type: 'agreement',
          value: isSelectAgreement
        }],
        successCallback: (dataArray) => {
          thirdpartyBindPhoneLogin(
            username,
            smsCode,
            this.nickName,
            this.$parent.cid,
            this.$parent.mobileModel,
            this.$parent.mobileVersion,
            this.$parent.appVersion
          ).then(res => {
            window.localStorage.setItem('XIAOBUSESSION', res.SESSION_ID)
            getUnreadMessageCount().then(resp => {
              // 用户消息未读数传给底层
              this.$System.then(System => {
                System.syncUnreadMessageCount(
                  resp.COUNT,
                  () => {
                    console.log('未读总数传递成功')
                  },
                  () => {
                    console.log('未读总数传递失败')
                  }
                )
              })

              res.PHONE = username
              setUserInfoJumpLogin(res, this)
              this.$toastMsg('登录成功')
            })
          })
        },
        errorCallback: (error) => {
          console.log('表单校验失败：' + error)
          this.$toastMsg(error)
        }
      })
    }
  }
}
</script>

<style scoped>
.title-text {
  color: #333;
}
/* 头像 */
.head-portrait-icon {
  width: 100px;
  height: 100px;
  margin: 15px 0;
}
/* 昵称 */
.nick-name {
  color: #333;
}
/* 登录错误提示 */
.error-msg-warpper {
  color: #fff;
  font-family: Helvetica;
  width: 750px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  background-color: #ffcea0;
}
/* 输入组件包裹成 */
.input-warpper {
  padding: 10px 30px 0 30px;
}
/* 确定按钮 */
.confirm-btn {
  color: #fff;
  width: 690px;
  height: 80px;
  line-height: 80px;
  margin-top: 100px;
  border-radius: 8px; /*px*/
  border: none;
}
/* 底部图片 */
.bottom-img {
  width: 750px;
  height: 156px;
  position: absolute;
  bottom: 0;
  left: 0;
}
</style>
